<template>
	<div class="record">
		<cl-popup direction="bottom" size="450px" :force-update="false" :visible.sync="visible">
			<van-tabs v-model="index" swipeable @change="onChange">
				<van-tab title="金币明细" name="gold">
					<template v-if="list.gold.data.length > 0">
						<div class="record-gold">
							<van-list class="scroller" :offset="1" :finished="list.gold.finished" v-model="list.gold.loading" @load="onScrolltolower">
								<div class="record-gold__item" v-for="(item, index) in list.gold.data" :key="index">
									<div class="record-gold__det">
										<span class="record-gold__label">{{ item.remark }}</span>
										<span class="record-gold__date">{{ item.createTime }}</span>
									</div>

									<span class="record-gold__price" :class="[item.type == 1 ? 'is-z' : 'is-f']">{{ item.gold }}</span>
								</div>
							</van-list>
						</div>
					</template>

					<!-- 空态 -->
					<div class="record__empty" v-else>
						<img src="@/assets/2/images/red-package/empty.png" />
						<span>暂无金币明细</span>
					</div>
				</van-tab>

				<van-tab title="兑换明细" name="exchange">
					<template v-if="exchangeList.length > 0">
						<div class="record-exchange">
							<van-list
								class="scroller"
								:offset="1"
								:finished="list.exchange.finished"
								v-model="list.exchange.loading"
								@load="onScrolltolower"
							>
								<div class="record-exchange__tips">
									淘口令仅当天有效，领取后请尽快使用
								</div>

								<div class="record-exchange__item" v-for="(item, index) in exchangeList" :key="index">
									<div class="record-exchange__det">
										<span class="record-exchange__label">{{ item.goodsInfo.title || '暂无标题' }}</span>
										<span class="record-exchange__date">{{ item.createTime }}</span>
									</div>
									<button v-if="item.goodsInfo.tkl" class="record-exchange__copy" @click="copyBtn(item.goodsInfo.tkl)">
										复制淘口令
									</button>
									<button v-else class="record-exchange__copy is-grabed">商品已抢完</button>
								</div>
							</van-list>
						</div>
					</template>

					<!-- 空态 -->
					<div class="record__empty" v-else>
						<img src="@/assets/2/images/red-package/empty.png" />
						<span>暂无兑换明细</span>
					</div>
				</van-tab>
			</van-tabs>
		</cl-popup>
	</div>
</template>

<script>
import moment from 'moment';
import ClPopup from '@/components/popup';
import { List, Toast, Tabs, Tab } from 'vant';

export default {
	components: {
		ClPopup,
		'van-list': List,
		'van-tabs': Tabs,
		'van-tab': Tab
	},

	data() {
		return {
			visible: false,
			index: 'gold',

			list: {
				gold: {
					loading: false,
					finished: false,
					pagination: {
						page: 1,
						size: 15,
						total: 0
					},
					data: []
				},
				exchange: {
					loading: false,
					finished: false,
					pagination: {
						page: 1,
						size: 15,
						total: 0
					},
					data: []
				}
			}
		};
	},

	computed: {
		exchangeList() {
			return this.list.exchange.data.filter(e => {
				return e.goodsInfo.mdId != 0;
			});
		}
	},

	methods: {
		open() {
			this.visible = true;
			this.index = 'gold';

			for (let i in this.list) {
				this.list[i].pagination.page = 1;
				this.list[i].data = [];
			}

			this.refresh();
		},

		close() {
			this.visible = false;
		},

		onChange(i) {
			this.index = i;

			this.$nextTick(() => {
				this.refresh();
			});
		},

		copyBtn(tkl) {
			if (!tkl) {
				return Toast('商品已抢完');
			}

			BestpayHtml5.System.setClipboardContent(
				{
					data: tkl
				},
				() => {
					Toast('复制成功，请打开手机淘宝领取礼品');
				}
			);
		},

		refresh(params) {
			let x = this.list[this.index];

			x.loading = true;

			let data = {
				...x.pagination,
				...params,
				order: 'createTime',
				sort: 'desc'
			};

			if (data.page == 1) {
				x.data = [];
			}

			if (this.index == 'gold') {
				data.scene = '';
			} else {
				data.scene = '4,5';
				data.goodType = 1;
			}

			this.$service.bwbt.bwbtGold
				.log(data)
				.then(res => {
					res.list.map(e => {
						e.createTime = moment(e.createTime).format('YYYY-MM-DD HH:mm:ss');

						if (e.ext) {
							try {
								e.goodsInfo = JSON.parse(e.ext);
							} catch (e) {
								e.goodsInfo = {};
							}
						}
					});

					if (data.page == 1) {
						x.data = res.list;
					} else {
						x.data = [...x.data, ...res.list];
					}

					x.pagination = res.pagination;
					x.finished = x.data.length >= res.pagination.total;

					x.loading = false;
				})
				.catch(err => {
					x.loading = false;
					Toast(err.message);
				});
		},

		onScrolltolower() {
			this.refresh({
				page: this.list[this.index].pagination.page + 1
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.record {
	/deep/.cl-popup {
		border-radius: 20px 20px 0 0;
		overflow: hidden;

		&__container {
			overflow: visible;
			padding: 0;
		}
	}

	/deep/.van-tabs {
		&__wrap {
			position: relative;
			&::after {
				display: block;
				border: 0;
				width: 2px;
				height: 60px;
				background-color: #e5e5e5;
				position: absolute;
				left: 50%;
				top: 20px;
			}
		}
	}

	&__close {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 60px;
		width: 60px;
		border: 1px solid #fff;
		border-radius: 60px;
		position: absolute;
		bottom: -90px;
		left: calc(50% - 30px);
		color: #fff;
	}

	.scroller {
		height: 810px;
		width: 100%;
		overflow: auto;
	}

	.record-gold {
		&__item {
			font-size: 24px;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #eee;
			padding: 20px 40px;
		}

		&__det {
			flex: 1;

			span {
				display: block;
			}
		}

		&__price {
			font-size: 36px;
			font-weight: bold;

			&.is-z {
				color: #f70114;
				&::before {
					content: '+';
				}
			}

			&.is-f {
				color: #56b702;
				&::before {
					content: '-';
				}
			}
		}

		&__date {
			color: #999;
		}

		&__label {
			font-size: 28px;
			font-weight: bold;
			margin-bottom: 10px;
		}
	}

	.record-exchange {
		&__item {
			font-size: 24px;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #eee;
			padding: 20px 40px;
		}

		&__det {
			flex: 1;

			span {
				display: block;
			}
		}

		&__tips {
			background-color: #fff7ed;
			color: #65636a;
			text-align: center;
			height: 60px;
			line-height: 60px;
			font-size: 24px;
			margin-top: 20px;
		}

		&__copy {
			border: 2px solid #ff462c;
			color: #ff462c;
			border-radius: 46px;
			height: 46px;
			line-height: 42px;
			font-size: 24px;
			background-color: #fff;
			padding: 0 20px;

			&.is-grabed {
				border-color: #ccc;
				color: #ccc;
			}
		}

		&__date {
			color: #999;
		}

		&__label {
			font-size: 26px;
			font-weight: bold;
			margin-bottom: 10px;
		}
	}

	.record__empty {
		height: 600px;
		text-align: center;
		padding-top: 70px;

		img {
			display: block;
			height: 450px;
			width: 600px;
			margin: 0 auto;
		}

		span {
			font-size: 28px;
			position: relative;
			top: -100px;
			left: 10px;
		}
	}
}
</style>
